<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<%@ include file="../header.jsp"%>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body>	
	<div class="demoTable">
	   名字：
	  <div class="layui-inline">
	    <input class="layui-input"  id="name" autocomplete="off">
	  </div>
	   创建开始时间：
	  <div class="layui-inline">
	    <input type="text" name="beginCreateTime" id="beginCreateTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
	  </div>
	  创建结束时间：
	  <div class="layui-inline">
	  	 <input type="text" name="endCreateTime" id="endCreateTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
	  </div>
	  <button class="layui-btn" data-type="reload">搜索</button>
	</div>
	
	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
	
	<script type="text/html" id="topToolbar">
  		<div class="layui-btn-container">
   		<button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
   		<button class="layui-btn layui-btn-sm" lay-event="insert">添加</button>
 	</div>
	</script>
	
	<script type="text/html" id="rightToolbar">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
   <script type="text/html" id="statusTpl">
        {{#        if(d.status == 1) {                }}
                                          在售
        {{#        } else if (d.status == 2) {        }}
                                         下架
        {{#        } else if (d.status == 3) {        }}
                   	    删除
        {{#        }                                  }}
    </script>
    
    <script type="text/html" id="mainImageTpl">
		<img src="{{d.mainImageFullUrl}}"></img>
    </script>
	
	<script>
		layui.use(['table','laydate'], function(){
		  var table = layui.table;
		  var laydate = layui.laydate;
		  
		  //日期
		  laydate.render({
		    elem: '#endCreateTime'
		  });
		  laydate.render({
			elem: '#beginCreateTime'
		  });
		  
		  table.render({
		    elem: '#tableId'
		    ,url:'${path}/product/selectByPage.action'
		    ,toolbar: '#topToolbar' //开启头部工具栏，并为其绑定左侧模板
		    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    ,cols: [[
		      {type: 'checkbox', fixed: 'left'}
		      ,{field:'id', title: 'ID', sort: true}
		      ,{field:'categoryId', title: '商品分类ID', sort: true}
		      ,{field:'name', title: '商品名'}
		      ,{field:'subtitle', title: '商品副标题'}
		      ,{field:'mainImage', title: '图片',  templet: "#mainImageTpl"}
		      ,{field:'price', title: '价格'}
		      ,{field:'stock', title: '库存'}
		      ,{field:'status', title: '状态', templet: "#statusTpl"}
		      ,{field:'createTime', title: '创建时间', templet:"<div>{{!d.createTime?'未知':layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}</div>"}
		      ,{field:'updateTime', title: '修改时间', templet:"<div>{{!d.updateTime?'未知':layui.util.toDateString(d.updateTime, 'yyyy-MM-dd')}}</div>"}
		      ,{fixed: 'right', title:'操作', toolbar: '#rightToolbar'}
		    ]]
		    , page : true
		    ,id: 'tableReload'
		  });
		  
		  
		  
		//头工具栏事件
		  table.on('toolbar(tableFilter)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'insert':
		    	  layer.open({
		    		  type : 2,
		    		  area : ['800px', '550px'],
		    		  content : '${path}/product/getProductInsertPage.action'
		    	  });
		    	  break;
		      case 'deleteAll':
		          var data = checkStatus.data;
		          //[{departmentName: "软件开发部", roleName: "", userAge: 0, userEmail: "", userId: 5},{userId : }]
		          console.log(data);
		    	  layer.confirm(
		    	  	'您确认要删除么?',
		    	  	{icon : 3},
		    	  	function() {
		    	  		var ids = [];// [1,2,3]
						$(data).each(function() {
							// this : 当前正在遍历的对象  this.userId
							ids.push(this.userId);
						});
		    	  		// "1,2,3"
		    	  		var idsStr = ids.join(',');
						$.post(
							'${path}/product/deleteAll.action',
							{'ids' : ids},
							function(jsonResult) {
								console.log(jsonResult)
								if(jsonResult.code == 0) {
									// alert(jsonObj.msg);
									mylayer.okMsg(jsonResult.msg);
									
									table.reload('tableReload');
									layer.close(index);
								} else {
									mylayer.errorMag(jsonResult.msg);
								}
							},
							'json'
						);
		    	  	}	
		    	  );
		      break;
		      //自定义头工具栏右侧图标 - 提示
		      case 'LAYTABLE_TIPS':
		        layer.alert('这是工具栏右侧自定义的一个图标按钮');
		      break;
		    };
		  });
		  
		  //监听行工具事件
		  table.on('tool(tableFilter)', function(obj){
		    var data = obj.data;
		    //console.log(obj)
		    if(obj.event === 'del'){
		    	layer.confirm(
					'您确认要删除么？',
					{icon : 3},
					function(index){//点击确认触发
						$.post(
							'${path}/product/deleteById.action',
							{'id' : data.userId},
							function(jsonResult) {
								console.log(jsonResult)
								if(jsonResult.code == 0) {
									// alert(jsonObj.msg);
									mylayer.okMsg(jsonResult.msg);
									// location.href = '${path}/user';
									
									// mylayer.okUrl(jsonResult.msg, '${path}/user?method=selectLayuiByPage');
									table.reload('tableReload');
									layer.close(index);
								}
							},
							'json'
						);
					},
					function(index) {//点击取消触发
						console.log("点击了取消");
					}
				);
		    } else if(obj.event === 'edit'){
		    	layer.open({
		    		  type : 2,
		    		  area : ['500px', '450px'],
		    		  content : '${path}/product/getProductUpdatePage.action?id=' + data.userId
		    	  });
		    }
		  });
		  
		  
		  var $ = layui.$, active = {
		    reload: function(){// 当点击搜索按钮触发这个方法
		      var demoReload = $('#demoReload');
		      
		      //执行重载
		      table.reload('tableReload', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: { //  /student/selectByPage.action?page=1&limit=10&name=55&beginCreateTime=1998-01-09
		        	 name: $('#name').val(),
		        	 beginCreateTime: $('#beginCreateTime').val(),
		        	 endCreateTime: $('#endCreateTime').val()
		        }
		      }, 'data');
		    },
		    deleteAll : function() {
		    	var checkStatus = table.checkStatus('tableReload')
			    var data = checkStatus.data;
		    },
		    insert : function() {
		    	
		    }
		  };
		  
		  $('.demoTable .layui-btn').on('click', function(){
		    var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
		  });
		  
	  });
		</script>
</body>
</html>